<template>
	<div class="main-height">
		<el-row type="flex" class="tree-box" :gutter="10">
			<el-col :span="6" class="tree-box-body">
				<el-input size="mini" placeholder="请输入关键字" v-model="filterOrg" @change="searchOrg" clearable >
					<el-button size="mini" slot="append" type="primary" @click="searchOrg">搜索</el-button>
				</el-input>
				<el-tree class="tree" ref="tree"
					:data="orgList" 
					:props="{label: 'name'}" 
					:filter-node-method="filterNode" 
					@node-click="checkNode"
				>
					<div class="tree-item" slot-scope="{ node, data }">
						<el-tooltip effect="dark" placement="right" :content="node.label">
							<div>{{ node.label }}</div>
						</el-tooltip>
					</div>
				</el-tree>
			</el-col>
			<el-col :span="18" class="tree-box-body" >
				<div class="category-tree-head">
					<span class="currentSupplier">{{ org.name }}</span>
					<el-button size="mini" type="primary" @click="clear" >清除选择</el-button>
					<el-button size="mini" type="primary" @click="add">新增加价模板</el-button>
				</div>
				<div>
					<el-table :data="pointList">
						<el-table-column label="模板ID" prop="priceId"></el-table-column>
						<el-table-column label="绑定组织" prop="org.name"></el-table-column>
						<el-table-column label="加点方式">
							<template slot-scope="scope">
								<point-type :type="scope.row.price.type" :priceId="scope.row.price.id" :orgId="scope.row.orgId"></point-type>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-dropdown class="el-dropdown-button">
									<el-button size="mini" type="primary">
										查看<i class="el-icon-arrow-down el-icon--right"></i>
									</el-button>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item v-if="(scope.row.price.type & 1) == 1">组织</el-dropdown-item>
										<el-dropdown-item v-if="(scope.row.price.type & 2) == 2">用户</el-dropdown-item>
										<el-dropdown-item v-if="(scope.row.price.type & 4) == 4">供应商</el-dropdown-item>
										<el-dropdown-item v-if="(scope.row.price.type & 8) == 8">分类</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
								<template v-if="scope.row.priceId == useOrg.priceId">
									<el-button size="mini" type="primary" disabled>当前生效</el-button>
									<el-button size="mini" type="primary">取消</el-button>
								</template>
								<template v-else>
									<el-button v-if="useOrg.priceId" size="mini" type="primary" @click="configUse(scope.row.priceId)">应用</el-button>
								</template>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-col>
		</el-row>
		<add-point ref="addOrgPoint" type="org" :target="org.id" :list="org.data"></add-point>
	</div>
</template>

<script>
	import { getAllOrgList } from '@/api/admin.api'
	import { getOrgList, getOrgPoint, pointOrgUse, configUse } from '@/api/price.api'
	import addPoint from './addPoint'
	import pointType from './pointType'
	export default {
		name: 'price-config-org',
		components: {
			addPoint, pointType
		},
		data() {
			return {
				orgList: [],
				filterOrg: "",
				org: {
					id: "",
					name: "",
					data: []
				},
				pointList: [],
				useOrg: {},
			}
		},
		mounted() {
			this.getOrgList();
			this.getPointList();
		},
		methods: {
			getOrgList() {
				getOrgList().then(res => {
					this.orgList = res
					this.org.data = this.orgList
				})
			},
			getPointList() {
				getOrgPoint(this.org.id).then(res => {
					this.pointList = res
				})
				pointOrgUse(this.org.id).then(res => {
					this.useOrg = res
				})
			},
			filterNode(value, data) {
				if(!value.toUpperCase()) return true
				return data.name.toUpperCase().indexOf(value.toUpperCase()) !== -1
			},
			checkNode(data, node, dom) {
				this.org.id = data.id
				this.org.name = data.name
				this.org.data = [data]
			},
			searchOrg() {
				this.$refs.tree.filter(this.filterOrg)
			},
			clear() {
				this.org.id = ''
				this.org.name = ''
				this.getPointList();
			},
			add() {
				this.$refs['addOrgPoint'].showDialog()
			},
			configUse(priceId) {
				configUse({orgId: this.org.id, priceId: priceId}).then(res => {
					this.getPointList();
				})
			}
		},
		watch: {
			'org.id'(value){
				this.getPointList();
			}
		}
	}
</script>

<style scoped lang="scss">
	.main-height{
		height: calc(100vh - 90px);
		overflow: hidden;
		position: relative;
	}
	
	.tree{
		width: 100%;
		margin-top: 10px;
	}
	
	.tree-box{
		height:100%;
		display: block;
		overflow: hidden;
	}
	
	.tree-box-body {
		overflow-y: scroll;
		height: 100%;
		display: block;
		overflow-x: hidden;
		padding: 5px;
	}
	
	.tree-item{
		width: 100%
	}
	
	.tree-box-body{
		.cell{
			text-align: left;
		}
	}
	
	.category-tree-head{
		display: flex;
		justify-content: flex-start;
		
		.category-tree-head-search{
			width: 220px;
			padding-left: 15px;
			padding-right: 15px;
		}
	}
	
	.tree-category{
		padding-left: 10px;
	}
	
	.noSupplier{
		font-size: 40px;
		font-weight: bold;
		color: #dfdfdf;
		padding: 40px;
		line-height: 4em;
	}
	
	.currentSupplier{
		padding-left: 15px;
		line-height: 2rem;
		font-weight: bold;
		color: #ff4d4f;
		margin-right: 10px;
	}
	
	.el-dropdown-button{
		margin-right: 10px;
	}
	
</style>